<template>
   <div>
<el-form :inline="true" class="demo-form-inline" :model="cForm">
  <el-form-item label="一级分类" >
    <el-select  placeholder="请选择" v-model="cForm.cate1id"
    :disabled="!isshow" @change="getcategory2">
      <el-option :label="cate1.name" v-for="cate1 in category1" :key="cate1.id" :value="cate1.id"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="二级分类">
  <el-select  placeholder="请选择" v-model="cForm.cate2id" :disabled="!isshow" @change="getcategory3">
      <el-option :label="cate2.name" v-for="cate2 in category2" :key="cate2.id" :value="cate2.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="三级分类">
   <el-select  placeholder="请选择" v-model="cForm.cate3id" :disabled="!isshow" @change="getcategoryList">
      <el-option :label="cate3.name" v-for="cate3 in category3" :key="cate3.id" :value="cate3.id"></el-option>
    </el-select>
  </el-form-item>
  </el-form>
   </div>
</template>

<script>
export default {
 name:'CategorySelect',
 data(){
   return{
    category1:[],
    category2:[],
    category3:[],
    cForm:{
        cate1id:'',
        cate2id:'',
        cate3id:'',
    }
   }
 },
 props:['isshow'],
 mounted() {
    this.getcategory1()
 },
 methods:{
  async getcategory1(){
    let result=await this.$API.attr.reqcategory1()
    if(result.code===200){
        this.category1=result.data
    }else{
        console.log('获取一级分类数据失败！')
    }
    },
    //一级分类自定义事件回调
    async getcategory2(){
    this.cForm.cate2id=''
    this.cForm.cate3id=''
    this.category2=[]
    this.category3=[]
    let result=await this.$API.attr.reqcategory2(this.cForm.cate1id)
    if(result.code===200){
        this.category2=result.data
        this.$emit('getcategoryId',{cateid:this.cForm.cate1id,level:1})
    }else{
        console.log('获取二级分类数据失败！')
    }
    },
     //二级分类自定义事件回调
    async getcategory3(){
    this.cForm.cate3id=''
      this.category3=[]
    let result=await this.$API.attr.reqcategory3(this.cForm.cate2id)
    if(result.code===200){
        this.category3=result.data
        this.$emit('getcategoryId',{cateid:this.cForm.cate2id,level:2})
    }else{
        console.log('获取三级分类数据失败！')
    }
    },
      //三级分类自定义事件回调（展示全部数据）
    async getcategoryList(){
   this.$emit('getcategoryId',{cateid:this.cForm.cate3id,level:3})
    }
 }
}
</script>

<style>

</style>